<template>
	<!-- 首页 -->
	<view>
		<view class="teachIng" @click="videoShow = true">
			<!-- <image src="@/static/images/newhone/kaiguan.png"
				style="width: 30rpx;height: 30rpx;position: absolute;left: 10rpx ;top: 10rpx;z-index: 2;">
			</image> -->
			<!-- <image style="width: 100%;height: 100%;" src="@/static/images/newhone/yanshi.png"></image> -->
		</view>
		<!-- <image class="youxi" @click="$refs.gameModal.open()" src="@/static/images/newhone/youxiji.png"></image> -->
		<Notice class="danmuCss" :data="notice[0]" v-if="notice.length>0" />
		<view class="info">
			<!-- <view class="leftbtn" @click="lr(1)">
				<image src="/static/images//newimage//youanniu.png"></image>
			</view> -->
			<view class="info_left">
				<view class="tool " @click="toAgaincoupon()">
					<image src="@/static/images/newhone/daojuka.png"></image>
				</view>
				<view class="tool" @click="toWeixincoupon()">
					<image src="@/static/images/newhone/weixinfuli.png"></image>
				</view>
				<view class="tool " @click="toCoupon()">
					<image src="@/static/images/newhone/tiantianlingquan.png"></image>
				</view>
			</view>
			<view class="info_right">
				<view class="tool small" @click="showRule()">
					<image src="@/static/images/newhone/wanfa.png"></image>
				</view>
				<view class="tool small" @click="toKefu()">
					<image src="@/static/images/newhone/kefu.png"></image>
				</view>
				<view class="tool small " :class="{'yinyue':musicIsPaly}" @click="musicPlay()">
					<image src="@/static/images/newhone/yinyue.png"></image>
				</view>

				<!-- <view class="tool" @click="toCoupon()">
					<image src="/static//images//oneImage//youhuiquan.png"></image>
					<text>优惠券</text>
				</view>
				<view class="tool" @click="toAgaincoupon()">
					<image src="/static//images//oneImage//youhuiquan.png"></image>
		
					<text>重抽卡</text>
				</view>
				<navigator class="tool" open-type="switchTab" url="/pages/blindbox/blindbox">
					<image src="/static//images//oneImage//youhuiquan.png"></image>
					<text>更多盲盒</text>
				</navigator>
				<view class="tool" @click="toChangjian()">
					<image src="/static//images//oneImage//youhuiquan.png"></image>
					<text>常见问题</text>
				</view>
				<view class="tool" @click="toOuqibang()">
					<image src="/static//images//oneImage/ouqibang.png"></image>
					<text>欧气榜</text>
				</view>
				<view class="tool" @click="toChengjiu()">
					<image src="/static//images//oneImage/chengjiu.png"></image>
					<text>成就</text>
				</view>
				<view class="tool" @click="showRule()">
					<image src="/static//images//oneImage/wanfa.png"></image>
					<text>玩法说明</text>
				</view>
				<view class="tool" @click="toService()">
					<image src="/static//images//oneImage/kefu.png"></image>
					<text>在线客服</text>
				</view> -->

			</view>

			<!-- <view class="rightbtn" @click="lr(2)">
				<image src="/static/images//newimage//zuoanniu.png"></image>
			
			</view> -->
		</view>
		<!-- 顶部区域 -->
		<view class="topmain">

			<view class="topnav" :style="{'padding-top':overH*.8+'px'}">
				<!-- <view class="top">
					<image src="/static/images/home/xinxuanhezi_white.png" class="icon"></image>
					<text>正品保证 三件包邮</text>
					<image src="/static/images/home/help.png" class="help"></image>
					<image src="/static/images/home/kefu.png" class="kefu" @click="toService()"></image>
				</view> -->
				<!-- <view class="warning">
					<image src="/static/images/home/horn.png" class="icon"></image>
					<text class="warntext">
						商品抽奖存在概率，付费请谨慎，商品不喜欢可回收。    
					</text>
					<navigator class="helptext" url="/pages/index/proposal">常见问题</navigator>
					<text class="kefutext" @click="toService()">在线客服</text>
				</view> -->
				<!-- 滚动消息 -->
				<!-- <image class="topImg" src="/static/images//oneImage//titleinfo.png"></image> -->
				<!-- <view class="danmuCss"><danmu :danmuList="notice" /></view> -->
				<!-- <text class="titleInfo">商品抽奖存在概率，付费请谨慎，商品不喜欢可回收</text> -->
				<overlay title="盲盒玩法规则" :content="ruleInfo" ref="overlay" />
				<view class="swiperView">
					<image class="swiper-prev-btn " src="@/static/images/newhone/arrowR.png" mode=""
						@click="changeSwiper('prev')"></image>
					<swiper :current="oldCurrent+1" class="goodsSwiperBig" display-multiple-items="1"
						previous-margin="50rpx" next-margin="50rpx" circular @change="swiperScroll">
						<swiper-item v-for="(item, index) in goodsList" :key="index">
							<view class="swiper-itemBig" :data-txt="item.ssName">
								<image :src="item.cover_image" @click="seemore()"></image>
							</view>
						</swiper-item>
					</swiper>
					<image src="@/static/images/newhone/arrowL.png" mode="" class="swiper-next-btn "
						@click="changeSwiper('next')"></image>
					<image src="../../static/images/newhone/dizuo.png" class="dizuo" mode="scaleToFill"></image>
					<view class="price1"> <text class="icon">¥</text> {{goodsList[current].first_blood}} <text
							class="unit">/个</text> </view>
					<view class="qipao " :class="item.class" v-for="(item,index) in qipaoGoods" :key="index">
						<image class="qipaoImg" :src="item.cover_image"></image>
					</view>

				</view>
				<image class="bgheadLeft" src="@/static/images/newhone/bgheadLeft.png"></image>
				<image class="bgheadRight" src="@/static/images/newhone/bgheadRight.png"></image>

				<!-- <view class="mainpic">
					<image :src="goodsList[current].cover_image" class="mainpic_img" @click="seemore"></image>
					<view class="price">¥{{goodsList[current].first_blood}}元/个</view>
				</view> -->
				<!-- <image src="/static/images/newimage/shouzhi.png" class="mainpic_seegoods" @click="seemore"></image> -->
				<!-- <view class="playbtn" @click="demo">
				
					<image src="/static/images//newimage//shiwan.png" class="bgborder"></image>
					</view> -->
				<!-- <view class="rule" @click="showRule">
						<image src="/static/images/newimage/shuoming.png"></image>
					
			    </view> -->
				<!-- <view class="energy"> -->
				<!-- <view class="energy_nengliang">
						<image src="/static/images//newimage//zhanshi.png"></image>
					</view> -->
				<!-- <view class="energyInfo">
						<text style="font-size: 20rpx;">抽盒赢取能量值</text>
					</view>
					<view class="energy_progress">
						<view class="energy_progress_bar" :style="{ width: energy/ 100 * 640 + 'rpx' }"></view>
					</view>
				</view> -->
				<!-- <view class="risktip1">积满能量值100%获得史诗及以上商品</view> -->
				<!-- <view class="goodsprice"></view> -->
				<swiper :current="oldCurrent" class="goodsSwiper" display-multiple-items="3" next-margin="30px"
					previous-margin="30px" circular @change="bannercg">
					<swiper-item v-for="(item, index) in goodsList" :key="index" @click="setCurrent(index)"
						:class="{ active: current === index ,brother:oldCurrent === index||(oldCurrent==goodsList.length-1?0:oldCurrent+1)+1 === index||(oldCurrent==goodsList.length-2?-1:oldCurrent+1)+1 === index}">
						<view class="swiper-item" :data-txt="item.ssName">
							<image :src="item.cover_image_two"></image>
							<!-- 	<image src="../../static/images/newhone/blind1.png" v-if="index%10 === 0"></image>
							<image src="../../static/images/newhone/blind2.jpg" v-else-if="index%10 === 1"></image>
							<image src="../../static/images/newhone/blind3.jpg" v-else-if="index%10 === 2"></image>
							<image src="../../static/images/newhone/blind4.jpg" v-else-if="index%10 === 3"></image>
							<image src="../../static/images/newhone/blind5.jpg" v-else-if="index%10 === 4"></image>
							<image src="../../static/images/newhone/blind6.jpg" v-else-if="index%10 === 5"></image>
							<image src="../../static/images/newhone/blind7.jpg" v-else-if="index%10 === 6"></image>
							<image src="../../static/images/newhone/blind8.png" v-else-if="index%10 === 7"></image>
							<image src="../../static/images/newhone/blind9.jpg" v-else-if="index%10 === 8"></image>
							<image src="../../static/images/newhone/blind10.jpg" v-else-if="index%10 === 9"></image> -->

							<text>{{ item.name }}</text>
						</view>
					</swiper-item>
				</swiper>
				<view class="box" :style="{marginBottom:overH?'0':'100rpx'}">
					<!-- <navigator class="box_more" open-type="switchTab" url="/pages/blindbox/blindbox">
						<image src="/static/images//oneImage/shiwan.png"></image>
						<!-- <text>更多盲盒</text> -->

					<!-- <view class="box_openbtn box_fuli" @click="toWeixincoupon()"> -->
						<!-- <image src="/static//images/oneImage/shiwan.png"></image> -->
						<!-- <image src="../../static/images/newhone/fuli.png"></image> -->
					<!-- </view> -->
					<view class="box_openbtn box_openBox" @click="openbox()">
						<!-- <image src="/static//images/oneImage/open.png"></image> -->
						<image src="../../static/images/newhone/openBox.png"></image>
					</view>
				</view>
				<!-- 1.0 -->
				<!-- <view class="x3">
					<image src="/static/images//oneImage/goodsback.png"></image>
				</view> -->
				<!-- 1.0 -->

				<!-- 
				<view class="buytip">

					<text>未成年人需在监护人陪同下购买商品，抽奖存在风险</text>
				</view> -->
			</view>
		</view>
		<!-- 全部商品 -->
		<u-popup v-model="showMoregoods" mode="bottom" border-radius="36" :mask-close-able="false">
			<view class="all">
				<view class="allgoods">
					<view class="allgoods_title">开盒必出以下宝贝之一
						<text>共{{allFilterGoodslist.length}}款({{specialGoodsNum.length}}个传说/史诗/稀有)</text>
					</view>
					<view class="allgoods_close" @click="hideMoregoods">X</view>
					<view class="allgoods_tag">
						<view class="chuanshuo" :class="curLevel==1?'active':''" @click="changeLevel(1)">
							<image class="typeImage" src="@/static/images/newhone/chuanshuo.png"></image>
							<text :style="curLevel == 1?'color:#fff':''">{{getNum(1)}}</text>
						</view>
						<view class="shishi" @click="changeLevel(2)" :class="curLevel==2?'active':''">
							<image class="typeImage" src="@/static/images/newhone/shishi.png"></image>
							<text :style="curLevel == 2?'color:#fff':''">{{getNum(2)}}</text>
						</view>
						<view class="xiyou" @click="changeLevel(3)" :class="curLevel==3?'active':''">
							<image class="typeImage" src="@/static/images/newhone/xiyou.png"></image>
							<text :style="curLevel == 3?'color:#fff':''">{{getNum(3)}}</text>
						</view>
						<view class="putong" @click="changeLevel(4)" :class="curLevel==4?'active':''">
							<image class="typeImage" src="@/static/images/newhone/gaoji.png"></image>
							<text :style="curLevel == 4?'color:#fff':''">{{getNum(4)}}</text>
						</view>
					</view>
				</view>
				<view class="goodslist" style="margin-top: 240rpx;padding-bottom: 150rpx;background-color: #F5F5F5;">
					<view class="goods" v-for="(item, index) in filterGoodslist" :key="index"
						@click="toDetail(item.goods_id)">
						<image class="tagImage" v-if="item.type == 1" src="@/static/images/newhone/chuanshuo.png">
						</image>
						<image class="tagImage" v-if="item.type == 2" src="@/static/images/newhone/shishi.png"></image>
						<image class="tagImage" v-if="item.type == 3" src="@/static/images/newhone/xiyou.png"></image>
						<image class="tagImage" v-if="item.type == 4" src="@/static/images/newhone/gaoji.png"></image>
						<image :src="item.cover_image" class="goods_pic"></image>
						<view class="goods_price">{{ item.goods_price }}元</view>
						<view class="goods_title">
							<text>{{ item.goods_name }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 支付宝订单 -->
		<u-popup v-model="orderShow" mode="bottom" border-radius="36" :mask-close-able="false">
			<ZfbOrder @close="orderShow = false" :data="goodsList[current]" />
		</u-popup>
		<!-- 视频教程 -->
		<u-popup v-model="videoShow" mode="center" border-radius="36" :mask-close-able="false">
			<VideoTeach @close="videoShow = false" />
		</u-popup>
		<!-- 游戏试玩 -->
		<uni-popup ref="gameModal" type="center" :animation="true">
			<Game @close="$refs.gameModal.close()" @play="(e)=>demo(e)" :isDemo="true" />
		</uni-popup>
		<!-- 天天领券 -->
		<uni-popup ref="couponModal" type="center" :animation="true">
			<CouPons @close="$refs.couponModal.close()" />
		</uni-popup>
		<!-- 道具卡 -->
		<uni-popup ref="toolsModal" type="center" :animation="true">
			<Tools @close="$refs.toolsModal.close()" />
		</uni-popup>
		<!-- 活动弹窗 -->
		<activity-popup :isShowActivityPopup="isShowActivityPopup" :data="activityPopupInfo"
			@closeActivityPopup="closeActivityPopup" />
		<yh-popup :isYhPopup="isYhPopup" :data="activityPopupInfo" @closeYhPopup="closeYhPopup" />
		<!-- <activity-popup :isShowActivityPopup="isShowActivityPopup" :data="activityPopupInfo" @closeActivityPopup="closeActivityPopup" /> -->
		<!-- 底部导航 -->
		<tabBar :currentPage="0" :messageNum="messageNum" />
	</view>
</template>
<script>
	import yhPopup from '@/components/yhPopup';
	import tabBar from '@/components/tabBar';
	import danmu from '@/components/danmu';
	import overlay from '@/components/overlay';
	import activityPopup from '@/components/activityPopup';
	import ZfbOrder from './components/zfbOrder.vue'
	import VideoTeach from './components/videoTeach.vue'
	import Game from './components/game.vue'
	import CouPons from './components/coupons.vue'
	import Tools from './components/tools.vue'
	import Notice from './components/notice.vue'
	let innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true; //自动播放
	innerAudioContext.loop = true; //循环播放
	innerAudioContext.src = '/static/homeBgMusic.mp3'; //背景音乐地址
	innerAudioContext.volume = 1; //音量	
	export default {
		components: {
			tabBar,
			danmu,
			overlay,
			activityPopup,
			yhPopup,
			ZfbOrder,
			VideoTeach,
			Game,
			CouPons,
			Tools,
			Notice
		},
		data() {
			return {

				dhTimers: [],
				orderShow: false,
				videoShow: false,
				gameShow: false,
				couponShow: true,
				overH: 0,
				id: 0,
				notice: [], //滚动公告
				filterGoodslist: [{
					cover_image: '',
					goods_name: ''
				}], //当前活动所含全部商品列表-按等级筛选
				goodsList: [{
					first_blood: 0,
					cover_image: ''
				}], //盲盒列表
				curLevel: 0, //当前选中的商品等级
				energyInfo: {}, //盲盒活动能量buff和模拟概率
				ruleInfo: '', //盲盒玩法规则
				showMoregoods: false, //显示更多商品
				allowTap: true, //防误触
				timer: '',
				isBuytip: true, //是否同意未成年人购买提示
				oldCurrent: 0, //当前查看的盲盒索引
				current: 0, //当前查看的盲盒索引
				currentId: '', //当前查看的盲盒索引id
				accessId: 'b9f99880-f392-11ec-818d-a59265127335', // 接入号ID （参数类型：字符串，必传）
				clientId: '', //访客id
				urlTitle: '', //用户来源
				fromUrl: '', //用户来源
				otherParams: {
					//指定专属坐席和用户昵称以及发送商品链接
					nickName: ''
				},
				customField: {
					//自定义字段
					test: '在线客服自定义字段'
				},
				messageNum: 0,
				couponNum: 0, //可用优惠券数量
				againcouponNum: 0, //可用重抽卡数量
				activityPopupInfo: {}, //活动弹窗
				isShowActivityPopup: false, //是否显示活动弹窗
				isYhPopup: false,
				energy: 50,
				specialGoodsNum: [],
				allFilterGoodslist: [],
				qipaoGoods: [],
				musicIsPaly: true
			};
		},
		filters: {
			tag(v) {
				switch (v) {
					case 1:
						return '传说款';
					case 2:
						return '史诗款';
					case 3:
						return '稀有款';
					case 4:
						return '普通款';
					default:
						break;
				}
			}
		},
		onLoad() {

			uni.showLoading({
				title: '加载中...'
			});
			this.getBlindboxlist();
			this.rollnotice();
			this.getIndexBlindboxrules();
			// this.getIndexlogo();//签到弹窗
			// this.getCouponnum();
			const that = this
			uni.getSystemInfo({
				success(res) {
					// windowHeight:568
					that.overH = res.windowHeight > 812
				}
			})
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.lotteryinsert();
				this.getPaidorder();
			}
			this.timer = setInterval(() => {
				this.rollnotice();
			}, 10000);
			if(this.musicIsPaly){
				
			innerAudioContext.play()
			}
		},
		onHide() {
			innerAudioContext.pause()
			clearInterval(this.timer);
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中...'
			});
			this.oldCurrent = 0 //当前查看的盲盒索引
			this.current = 0
			this.getBlindboxlist();
		},
		methods: {
			musicPlay() {
				if (this.musicIsPaly) {
					innerAudioContext.pause()
					this.musicIsPaly = false
				} else {
					innerAudioContext.play()
					this.musicIsPaly = true
				}
			},
			//去支付
			toPay(value, type) {

				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return
				}
				const open_method = value;
				// this.showDemo = false;
				// this.showTip = false;
				// this.showMask = false;
				let discount = 0;
				let initPrice, payInfo, usebalancePayablemoney
				if (open_method === 2) {
					// this.payBalance = this.payBalance2;
					payInfo = this.goodsList[this.current]
					console.log(payInfo, 'this.goodsList[this.current]');
					initPrice = payInfo.first_blood;
					usebalancePayablemoney = payInfo.first_blood
					discount = 0;
				} else {
					// this.payBalance = this.payBalance1;
					payInfo = this.goodsList[this.current];
					console.log(payInfo, 'this.goodsList[this.current]');
					initPrice = payInfo.first_blood;
					usebalancePayablemoney = payInfo.first_blood;
					discount = 0;
				}
				uni.navigateTo({
					url: '/pages/blindbox/confirmPay?' + this.$url.urlEncode({
						activity_id: this.goodsList[this.current].id,
						price: initPrice,
						open_method: open_method,
						discount: discount,
						cjType: type ? type : ''
					})
				})
				// this.showPayframe = true;
			},
			getNum(type) {
				const arr = this.allFilterGoodslist.filter(item => item.type === type)
				return (arr.length / this.allFilterGoodslist.length * 100).toFixed(2) + '%'
			},
			//获取已付款待获取开盒结果的订单
			getPaidorder() {
				this.$api.paidorder().then(result => {
					console.log('已付款待获取开盒结果的订单: ', result);
					if (result.all_num > 0) {
						uni.showModal({
							title: '温馨提示',
							content: '您有已付款的盲盒未获取开盒结果，是否前往获取？',
							confirmText: '获取',
							success: r => {
								if (r.confirm) {
									uni.navigateTo({
										url: '/pages/blindbox/blindbox_result2?' +
											this.$url.urlEncode({
												activity_id: result.orders.activity_id,
												price: result.orders.pay,
												order_id: result.orders.order_id,
												open_method: result.orders.open_method,
												cjType: 'cj'
											})
									});
								}
							}
						});
					}
				});
			},
			//客服
			toService() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					this.clientId = uni.getStorageSync('userId');
					this.otherParams.nickName = uni.getStorageSync('userName');
					let hrefAddress =
						'https://ykf-webchat.7moor.com/wapchat.html?accessId=' +
						this.accessId +
						'&clientId=' +
						this.clientId +
						'&otherParams=' +
						JSON.stringify(this.otherParams) +
						'&urlTitle=派箱箱APP&fromUrl=https://mh.mytshop.cn/h5/&customField=' +
						JSON.stringify(this.customField);
					uni.navigateTo({
						url: '/pages/index/customerService?href=' + encodeURIComponent(hrefAddress)
					});
				}
			},
			toKefu() {
				uni.navigateTo({
					url: '/pages/index/kefu'

				})
			},
			//跳转优惠券
			toCoupon() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/mine/coupon/coupon'
					});
				}
			},
			//跳转重抽卡
			toAgaincoupon() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/mine/prop/reextraction'
					});
				}
			},
			//跳转微信福利
			toWeixincoupon() {
				uni.navigateTo({
					url: '/pages/index/vxfuli'
				});
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/index/vxfuli'
					});
				}
			},
			//跳转欧气榜
			toOuqibang() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/blindbox/rankinglist'
					});
				}
			},

			toChangjian() {
				uni.navigateTo({
					url: '/pages/index/proposal'
				});
			},
			//跳转成就
			toChengjiu() {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/blindbox/achievement'
					});
				}
			},
			//跳转盲盒详情
			openbox() {
				console.log(this.goodsList[this.current], 'dddccc');
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					console.log();
					if (this.current % 2 === 0) {
						const item = this.goodsList[this.current]
						const param = encodeURIComponent(JSON.stringify({
							id: item.id,
							name: item.name,
							pt: item.pt,
							setting_id: item.setting_id,
							ss: item.ss,
							xy: item.xy,
							first_blood: item.first_blood,
							label_name: item.label_name,
							cover_image: item.cover_image,
							cs: item.cs,
							activity_describe: item.activity_describe,
							consume_num: item.consume_num
						}))
						uni.navigateTo({
							url: `/pages/choujiang/index1?option=${param}`
						})



						// this.orderShow = true
						return
					}

					uni.navigateTo({
						url: `/pages/index/extractionBlindbox?id=${this.goodsList[this.current].id}`
					});
				}
			},
			//获取首页弹窗海报
			getIndexlogo() {
				this.$api.getIndexlogo().then(res => {
					this.activityPopupInfo = res;
					if (res.poster != '') {
						// this.isShowActivityPopup = true;
						this.isYhPopup = true;
					}
				});
			},
			//关闭活动弹窗
			closeActivityPopup() {
				this.isShowActivityPopup = false;
			},
			closeYhPopup() {
				this.isYhPopup = false;
				this.isShowActivityPopup = true;
			},
			//获取优惠券、重抽卡数量
			getCouponnum() {
				this.$api.couponnum().then(res => {
					this.couponNum = res.coupon_num;
					this.againcouponNum = res.again_coupon_num;
				});
			},
			getMyindex() {
				this.$api.myindex().then(res => {
					this.messageNum = res.message_num;
					uni.setStorageSync('userName', res.user.user_name);
					uni.setStorageSync('userId', res.user.id);
				});
			},
			//增加抽奖等相关记录
			lotteryinsert() {
				this.$api.lotteryinsert().then(res => {
					this.getMyindex();
				});
			},

			// //获取盲盒列表
			// getBlindboxlist() {
			// 	this.$api
			// 		.activityList({
			// 			offset: 1,
			// 			activity_category_id: 0
			// 		})
			// 		.then(res => {
			// 			this.goodsList = res.map(item => {
			// 				item.ssName = item.name.substr(0, 4)
			// 				return item
			// 			});
			// 			if (this.goodsList.length > 1) {
			// 				this.current = 1;
			// 			}
			// 			this.currentId = this.goodsList[this.current].id;
			// 			this.getGoodsList();
			// 			this.getEnergy();
			// 		});
			// },
			getBlindboxlist() {


				this.$api
					.activity_list_index({
						is_new: 1
					})
					.then(res => {
						uni.hideLoading()
						uni.stopPullDownRefresh();

						let arr = []
						this.goodsList = []
						res.forEach(item => {
							item.ssName = item.name.substr(0, 4)
							item.legend_goods.forEach(good => {
								good.cover_image = 'https://mh.mytshop.cn' + good.cover_image
							})
							if (!arr.includes(item.id)) {
								this.goodsList.push(item)
								arr.push(item.id)
							}

						});
						if (this.goodsList.length > 1) {
							this.current = 1;
						}
						this.currentId = this.goodsList[this.current].id;
						this.startQp()

					}).catch(err => {
						uni.hideLoading()
					});
			},
			//获取盲盒全部商品
			getGoodsList() {
				this.$api
					.indexMoregoods({
						activity_id: this.currentId,
						type: this.curLevel
					})
					.then(res => {
						uni.stopPullDownRefresh();
						uni.hideLoading();
						this.filterGoodslist = res;
						this.allFilterGoodslist = res
						this.specialGoodsNum = res.filter((item, index) => {
							if (item.type !== 4) {
								return item
							}
						})

					});
			},
			// 开始气泡动画
			startQp(data) {
				return;
				let res = this.goodsList[this.current].legend_goods
				res = this.goodsList[this.current].legend_goods.concat(...res)
				let qpData = []
				res.forEach((item, index) => {
					qpData.push({
						...item,
					})

				})
				this.dhTimers.forEach(item => {
					window.clearInterval(item)
					item = null
				})
				const result = qpData.map((item, index) => {
					item.class = "qipao" + index % 5
					return item
				})
				let i = 0
				this.qipaoGoods = []
				let time1 = setInterval(() => {
					this.qipaoGoods.push(result[i])
					i++
					if (i >= result.length) {
						// this.qipaoGoods = []
						this.qipaoGoods.push(result[0])
						i = 1
					}
				}, 1 * 800)
				this.dhTimers.push(time1)
				setTimeout(() => {
					this.startQp()
				}, result.length * 10 * 1000)
			},
			//获取盲盒活动能量buff和模拟概率
			getEnergy() {
				// this.$api.energy({activity_id:this.currentId}).then (res=>{
				this.$api
					.energy({
						activity_id: this.goodsList[this.current].id
					})
					.then(res => {
						this.energyInfo = res;
						this.energy = res.energy;
						console.log(this.energy);
					});
			},
			//查看更多商品
			seemore() {
				this.getGoodsList()

				this.showMoregoods = true;
			},
			//跳转商品详情
			toDetail(id) {
				uni.navigateTo({
					url: `/pages/mall/goodsDetail?id=${id}`
				});
			},
			//按商品等级查看
			changeLevel(e) {
				this.curLevel = e;
				this.currentId = this.goodsList[this.current].id;
				this.$api
					.indexMoregoods({
						activity_id: this.goodsList[this.current].id,
						type: this.curLevel
					})
					.then(res => {
						uni.hideLoading();
						this.filterGoodslist = res;
					});
			},
			//隐藏更多商品弹框
			hideMoregoods() {
				this.showMoregoods = false;
				this.changeLevel(0);
			},
			//获取滚动公告
			rollnotice() {
				this.$api.rollnotice().then(res => {
					this.notice = res;
					setTimeout(() => {
						this.notice = []
						console.log(this.notice, 'notice');
					}, 4000)
				});
			},
			//获取盲盒玩法规则
			getIndexBlindboxrules() {
				this.$api
					.indexBlindboxrules({
						activity_id: this.id
					})
					.then(res => {
						if (res != null) {
							this.ruleInfo = res.rules;
						}
					});
			},

			//显示盲盒玩法规则
			showRule() {

				this.$refs.overlay.show();
			},
			// 手动切换轮播--上下切换
			changeSwiper(type) {
				switch (type) {
					case 'prev':
						if (this.oldCurrent === 0) {
							this.oldCurrent = this.goodsList.length - 1
						} else {
							this.oldCurrent = this.oldCurrent - 1;
						}
						break;
					case 'next':
						if (this.oldCurrent === this.goodsList.length - 1) {
							this.oldCurrent = 0;
						} else {
							this.oldCurrent = this.oldCurrent + 1;
						}
						break;
					default:
						break;
				}
				this.currentId = this.goodsList[this.oldCurrent].id
				this.curLevel = 0
				// this.getGoodsList()
				this.startQp()
			},
			swiperScroll({
				detail: {
					current
				}
			}) {
				// console.log(current);
				// this.current = current
				// if (current === 0) {
				// 	this.oldCurrent = this.goodsList.length - 1
				// } else if (current === this.goodsList.length - 1) {

				// 	this.oldCurrent = current
				// } else {
				// 	this.oldCurrent = current - 1
				// }
				this.currentId = this.goodsList[current].id
				this.curLevel = 0
				this.startQp()
				// this.getGoodsList()
			},
			bannercg({
				detail: {
					current
				}
			}) {

				if (current === this.goodsList.length - 1) {
					this.current = 0;
				} else {
					this.current = current + 1;

				}
				this.oldCurrent = current
				this.startQp()

			},
			//切换查看盲盒详情
			setCurrent(data) {
				this.current = data;
				let index = this.current - 1;
				this.oldCurrent = index < 0 ? this.goodsList.length - 1 : index;
				console.log(this.current);
				console.log(this.oldCurrent);
				this.getGoodsList();
				this.startQp()
				this.getEnergy();
			},
			//左右点击按钮
			lr(num) {
				console.log('haha');
				// 1 左侧 2 右侧
				if (num == 1) {
					this.oldCurrent = this.oldCurrent - 1 < 0 ? this.goodsList.length - 1 : this.oldCurrent - 1;
					this.current = this.oldCurrent;
				} else {
					this.oldCurrent = this.current;
				}
			},

			//试玩
			demo(value) {
				if (!this.allowTap) return;
				this.allowTap = false;
				setTimeout(() => {
					this.allowTap = true;
				}, 1000);
				uni.setStorageSync('blindboxId', this.currentId);
				uni.navigateTo({
					url: '/pages/blindbox/blindbox_result?' +
						this.$url.urlEncode({
							activity_id: this.currentId,
							price: this.goodsList[this.current].first_blood,
							order_id: 0,
							open_method: 3,
							open_methodCopy: value,
							playDemo: true
						})
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		padding-bottom: 30rpx;
	}

	.teachIng {
		width: 45rpx;
		height: 150rpx;
		position: fixed;
		left: 0;
		top: 45%;
		z-index: 999;

		&::after {
			width: 50%;
			height: 100%;
			// content: '新手教程';
			position: absolute;
			left: 15rpx;
			top: 25rpx;
			font-size: 12rpx;
			letter-spacing: 0;
			transform: scale(.75);
			color: #043FA0;
		}
	}

	.youxi {
		width: 93rpx;
		height: 93rpx;
		position: fixed;
		right: 0;
		top: 45%;
		z-index: 10;
	}

	.bgheadLeft {
		width: 268rpx;
		height: 414rpx;
		position: absolute;
		left: 0%;
		top: 297rpx;
		z-index: -1;
	}

	.bgheadRight {
		width: 286rpx;
		height: 416rpx;
		position: absolute;
		right: 0%;
		top: 297rpx;
		z-index: -1;
	}

	.info {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 40rpx;
		z-index: 10;

		.info_left {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			image {
				width: 60rpx;
				height: 60rpx;
			}

		}

		.info_right {
			padding: 40rpx 0;
			position: absolute;
			right: 0;
			top: 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.tool {
			width: 100rpx;
			height: 100rpx;
			position: relative;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}

			text {
				width: 100%;
				text-align: center;
				font-size: 8rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				position: absolute;
				left: 0;
				bottom: 5rpx;
				transform: scale(0.7);
				z-index: 2;
			}
		}

		.tool.small {
			width: 60rpx;
			height: 60rpx;
			margin-right: 10rpx;
		}

		.tool.small.yinyue {
			animation: rotate 5s linear infinite;
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			50% {
				transform: rotate(180deg);
			}

			to {
				transform: rotate(360deg);
			}
		}
	}

	.danmuCss {
		width: 80%;
		margin: auto;
		overflow: hidden;
		position: fixed;
		left: 10%;
		top: 197rpx;
		z-index: 30;
	}

	.energyInfo {
		@include center-start;
		width: 230rpx;
		line-height: 30rpx;
		background-color: #f5f5f5;
		border-width: 55rpx;
		box-shadow: 0 2rpx 4rpx 2rpx rgba(105, 22, 255, 0.29);
		border-radius: 28rpx;
		margin-bottom: 15rpx;
		border: 1px solid rebeccapurple;
	}

	.titleInfo {
		@include center-start;
		margin-top: 10rpx;
		width: 100%;
		color: #ffffff;
		font-size: 18rpx;
		font-weight: 800;
	}

	.topImg {
		width: 40%;
		height: 60rpx;
		position: relative;
		margin-left: 30%;
	}

	/deep/.danmus {
		top: 200rpx !important;
	}

	.topmain {
		width: 750rpx;
		// height: calc(var(--status-bar-height) + 1820rpx);
		height: calc(100vh - 50px);
		box-sizing: border-box;
		// background-image: url('@/static/images/newhone/bghead0.png');
		background-image: url('@/static/images/newhone/newHomeBg1.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
		z-index: 2;


	}

	.topnav {
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		padding-top: 0rpx;
		box-sizing: border-box;
		transform: scale(1.0);
		overflow-y: auto;



		.top {
			@include align-end;

			.icon {
				width: 158rpx;
				height: 40rpx;
				margin-left: 24rpx;
			}

			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				margin-left: 16rpx;
			}

			.help {
				width: 48rpx;
				height: 48rpx;
				margin-left: 116rpx;
			}

			.kefu {
				width: 48rpx;
				height: 48rpx;
				margin-left: 64rpx;
			}
		}

		.warning {
			@include align-start;
			margin-top: 6rpx;

			.icon {
				width: 44rpx;
				height: 44rpx;
				margin-left: 28rpx;
			}

			.warntext {
				width: 350rpx;
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 28rpx;
				margin-left: 18rpx;
			}

			.helptext {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				margin-left: 75rpx;
			}

			.kefutext {
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				margin-left: 24rpx;
			}
		}



		.mainpic {
			text-align: center;
			margin-top: 15rpx;
			transform: scale(0.8);

			&_img {
				width: 630rpx;
				height: 630rpx;
				animation: picWobble 3s infinite linear;
			}

			@keyframes picWobble {
				0% {
					transform: translateY(0);
				}

				50% {
					transform: translateY(30rpx);
				}

				100% {
					transform: translateY(0rpx);
				}
			}
		}

		.mainpic_seegoods {
			width: 76rpx;
			height: 76rpx;
			z-index: 20;
			position: absolute;
			top: 600rpx;
			right: 202rpx;
			animation: seeWobble 3s infinite linear;

			@keyframes seeWobble {
				0% {
					transform: translate(0, 0);
				}

				50% {
					transform: translate(30rpx, 30rpx);
				}

				100% {
					transform: translate(0, 0);
				}
			}
		}

		.leftbtn {
			position: absolute;
			top: 310rpx;
			right: 90rpx;
			z-index: 9;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.x3 {
			padding-left: 1%;
			padding-right: 1%;

			image {
				height: 30.8%;
				width: 98%;
				position: absolute;
			}
		}

		.rightbtn {
			position: absolute;
			top: 310rpx;
			left: 90rpx;
			z-index: 9;
			@include column-center;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.playbtn {
			position: absolute;
			top: 830rpx;
			right: 50rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.rule {
			position: absolute;
			top: 830rpx;
			left: 50rpx;

			@include column-center;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				margin-top: 6rpx;
			}
		}

		.energy {
			/* display: flex;
		position: relative;
		flex-direction: column; */
			@include column-center;
			margin-top: -55rpx;

			.price {
				position: relative;
				// margin-top: -55rpx;
				font-size: 40rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
				text-shadow: 2rpx 2rpx 4rpx rgba(4, 4, 4, 0.5);
				text-align: center;
			}

			&_nengliang {
				width: 558rpx;
				height: 100rpx;
				position: relative;

				image {
					@include img;
					position: absolute;
					top: -35rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				text {
					width: 238rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #b557f7;
					position: absolute;
					top: 8rpx;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;
				}
			}

			&_progress {
				/* width: 440rpx;
			height: 24rpx;
			background: rgba(255, 255, 255, 0.49);
			box-shadow: 0 2rpx 4rpx 2rpx rgba(105, 22, 255, 0.29);
			border-radius: 28rpx;
			border: 2rpx solid #FFFFFF;
			position: relative; */

				width: 640rpx;
				height: 16rpx;
				background: rgba(255, 255, 255, 0.49);
				box-shadow: 0 2rpx 4rpx 2rpx rgba(105, 22, 255, 0.29);
				border-radius: 28rpx;
				border: 2rpx solid #ffffff;
				position: relative;

				&_bar {
					width: 235rpx;
					height: 18rpx;
					background: linear-gradient(86deg, #00e9ff 0%, #985fff 100%);
					border-radius: 28rpx;
					position: absolute;
					top: -5rpx;
					left: 0;
				}

				/* &::after{
				content: '';
				width: 235rpx;
				height: 12rpx;
				background: linear-gradient(86deg, #00E9FF 0%, #985FFF 100%);
				border-radius: 28rpx;
				position: absolute;
				top: 0rpx;
				left: 0;
			} */
			}
		}

		.box {
			padding: 0rpx 50rpx;
			@include between;
			position: relative;
			z-index: 4;

			// .box_fuli {
			// 	image {
			// 		width: 212rpx;
			// 		height: 208rpx;
			// 	}
			// }

			&_openBox {
				width: 650rpx;
				height: 226rpx;
				@include center;

				image {
					@include img;
				}
			}
		}

		.buytip {
			@include center-start;
			margin-top: 60rpx;

			// image{
			// 	width: 50rpx;
			// 	height: 50rpx;
			// }
			text {
				width: 538rpx;
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 1.5;
			}
		}

		.risktip1 {
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			text-align: center;
			margin-top: 16rpx;
		}

		.risktip2 {
			font-size: 22rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #492aff;
			text-align: center;
			margin-top: 16rpx;
		}
	}

	.goodsprice {
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		text-shadow: 2rpx 2rpx 4rpx rgba(4, 4, 4, 0.5);
		text-align: center;
		margin-top: 16rpx;
	}

	.swiperView {
		position: relative;
		margin-top: 300rpx;

		.dizuo {
			width: 533rpx;
			height: 256rpx;
			position: absolute;
			left: 50%;
			top: 296rpx;
			transform: translate(-50%, 0%);
			z-index: -1;
		}

		.price1 {
			position: absolute;
			left: 50%;
			bottom: 0;
			color: #000;
			transform: translate(-50%, 40rpx);
			font-size: 32rpx;
			font-weight: bold;

			.icon,
			.unit {
				font-size: 12rpx;
				margin: 0 5rpx;
				transform: scale(.1);
			}
		}

		.qipao {
			width: 124rpx;
			height: 124rpx;
			background-image: url("../../static/images/newhone/qipao.png");
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			.qipaoImg {
				width: 70%;
				height: 70%;
				margin: 10%;
			}
		}

		.qipao0 {
			animation: qipaoFrames1 4s linear 1 forwards;
		}

		.qipao1 {
			animation: qipaoFrames2 5s linear 1 forwards;
		}

		.qipao2 {
			animation: qipaoFrames3 5s linear 1 forwards;
		}

		.qipao3 {
			animation: qipaoFrames4 6s linear 1 forwards;
		}

		.qipao4 {
			animation: qipaoFrames5 5s linear 1 forwards;
		}

		@keyframes qipaoFrames1 {
			0% {
				left: 25%;
				bottom: 0;
				visibility: hidden;
				opacity: 0;
			}

			39% {
				left: 25%;
				bottom: 20%;
				opacity: 0;
			}

			40% {
				opacity: 1;
				visibility: visible;
			}

			100% {
				left: 15%;
				bottom: 90%;
				visibility: hidden;
			}
		}

		@keyframes qipaoFrames2 {
			0% {
				left: 35%;
				bottom: 0;
				visibility: hidden;
				opacity: 0;
			}

			49% {
				left: 35%;
				bottom: 30%;
				opacity: 0;
			}

			50% {
				visibility: visible;
				opacity: 1;
			}



			100% {
				left: 30%;
				bottom: 90%;
				visibility: hidden;
			}



		}

		@keyframes qipaoFrames3 {
			0% {
				left: 45%;
				bottom: 0;
				visibility: hidden;
				opacity: 0;
			}

			59% {
				left: 45%;
				bottom: 40%;
				opacity: 0;
			}

			60% {
				visibility: visible;
				opacity: 1;
			}

			100% {
				left: 45%;
				bottom: 100%;
				visibility: hidden;
			}
		}

		@keyframes qipaoFrames4 {
			0% {
				left: 35%;
				bottom: 0;
				visibility: hidden;
				opacity: 0;
			}

			59% {
				left: 45%;
				bottom: 40%;
				opacity: 0;
			}

			60% {
				visibility: visible;
				opacity: 1;
			}

			70% {
				visibility: visible;
				opacity: 1;
				left: 55%;
			}


			100% {
				left: 60%;
				bottom: 90%;
				visibility: hidden;
			}
		}

		@keyframes qipaoFrames5 {
			0% {
				visibility: hidden;
				opacity: 0;
			}

			19% {
				left: 50%;
				bottom: 20%;
				opacity: 0;
			}

			20% {
				visibility: visible;
				left: 60%;
				bottom: 20%;
				opacity: 1;
			}

			100% {
				left: 80%;
				bottom: 90%;
				visibility: hidden;
			}
		}

		@keyframes qipaoFrames6 {
			0% {
				left: 50%;
				bottom: 0;
				visibility: hidden;
				opacity: 0;
			}



			59% {
				visibility: visible;
				left: 60%;
				bottom: 15%;
				opacity: 0;
			}

			60% {
				visibility: visible;
				left: 60%;
				bottom: 15%;
				opacity: 1;
			}

			70% {
				visibility: visible;
				left: 70%;
			}


			100% {
				left: 80%;
				bottom: 90%;
				visibility: hidden;
			}
		}

		.swiper-prev-btn,
		.swiper-next-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			line-height: 80rpx;
			text-align: center;
			background-color: rgba(255, 255, 255, 0.7);
			font-weight: 600;
			position: relative;

			text {
				color: #1a7e98;
				font-size: 50rpx;
			}
		}

		.swiper-prev-btn {
			position: absolute;
			left: 30rpx;
			top: 50%;
			z-index: 20;
		}

		.swiper-next-btn {
			position: absolute;
			right: 30rpx;
			top: 50%;
			z-index: 20;
		}

		.goodsSwiperBig {
			height: 500rpx;
			height: 500rpx;
			position: relative;
			z-index: 5;

			.swiper-itemBig {
				height: 500rpx;
				height: 500rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12rpx;
				position: relative;
				z-index: 5;

				image {
					width: 500rpx;
					height: 500rpx;
				}
			}
		}
	}

	.goodsSwiper {
		height: 300rpx;
		margin-top: 160rpx;
		padding: 0;
		align-self: center;
		position: relative;

		// z-index: 2;
		.swiper-item {
			border-radius: 12rpx;
			// padding: 10rpx;
			transition: 0.3s;
			position: relative;

			&::before {
				width: 153rpx;
				height: 134rpx;
				content: '';
				position: absolute;
				left: 50%;
				top: 50rpx;
				transform: translateX(-50%);
				background-image: url('../../static/images/newhone/nochoose.png');
				background-size: 153rpx 134rpx;
				background-repeat: no-repeat;
			}

			&::after {
				width: 153rpx;
				height: 134rpx;
				content: attr(data-txt);
				position: absolute;
				left: 50%;
				top: 50rpx;
				transform: translateX(-50%);
				line-height: 210rpx;
				font-weight: bold;
				text-align: center;

				font-size: 25rpx;
				color: #052AB6;
			}

			image {
				display: block;
				width: 136rpx;
				height: 136rpx;
				position: relative;
				z-index: 20;
				margin-left: 39rpx;
			}

			text {
				display: none;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				// display: inline-block;
				width: 100%;
				@include one;
				margin-top: 14rpx;
				text-align: center;
			}
		}

		.brother {
			.swiper-item {
				&::after {
					color: #052AB6;

				}
			}
		}

		.active {
			.swiper-item {
				transition: 0.3s;
				transform: scale(1);
				// border: 4rpx solid #FF1200;
				border-radius: 10rpx;

				&::before {
					width: 208rpx;
					height: 184rpx;
					content: '';
					position: absolute;
					left: 50%;
					top: 50rpx;
					transform: translateX(-47%);
					background-image: url('../../static/images/newhone/choose.png');
					background-size: 208rpx 184rpx;
					background-repeat: no-repeat;
				}

				image {
					display: block;
					width: 150rpx;
					height: 150rpx;
					margin-left: 38rpx;
					position: relative;
					z-index: 20;
				}

				&::after {
					width: 208rpx;
					height: 184rpx;
					content: attr(data-txt);
					position: absolute;
					left: 50%;
					top: 50rpx;
					transform: translateX(-47%);
					line-height: 270rpx;
					font-weight: bold;
					text-align: center;
					font-size: 35rpx;
					color: #052AB6;

				}
			}
		}
	}

	.all {
		max-height: 60vh;

		.allgoods {
			width: 100%;
			background-color: #f5f5f5;
			text-align: center;
			position: fixed;
			z-index: 999;
			top: 0;
			left: 50%;
			transform: translateX(-50%);

			.typeImage {
				width: 50rpx;
				height: 40rpx;
			}

			&_title {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin: 52rpx 0 0;

				text {
					color: #999;
					font-size: 24rpx;
					display: block;
					margin: 10rpx 0 20rpx;
				}
			}

			&_close {
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				position: absolute;
				top: 45rpx;
				right: 50rpx;
			}

			&_tag {
				margin: 0 0 30rpx;
				// @include between;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					width: 20%;
					font-size: 24rpx;
					margin-right: 1%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					text {
						width: 100rpx;
						display: block;
						border: 1px solid #ddd;
						border-radius: 5rpx;
						margin-top: 20rpx;
						padding: 5rpx 10rpx;
						font-size: 12rpx !important;
						color: #999;
					}
				}

				view:last-child {
					margin-right: 0;
				}

			}
		}
	}

	.prob {
		width: 750rpx;
		height: 150rpx;
		background: linear-gradient(0deg, #ffd9c2 0%, #fff8f8 100%);
		position: fixed;
		bottom: 0;
		z-index: 9999;

		&_title {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ff5400;
			text-align: center;
			margin-top: 25rpx;
		}

		&_probability {
			height: 100rpx;
			@include around;
			margin: 0 auto 30rpx;

			&_item {
				@include column-center;

				&_text {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}

				&_num {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}
			}
		}
	}

	.price {
		color: #f5f5f5;
		font-size: 64rpx;
		// font-family: Source Han Sans CN;
		font-weight: 900;
	}

	.goodslist {
		display: flex;
		flex-wrap: wrap;
		margin-top: 26rpx;
		padding: 40rpx 30rpx 30rpx;
		box-sizing: border-box;

		.goods {
			width: 330rpx;
			border-radius: 12rpx;
			background: linear-gradient(0deg, #f5ffff 0%, #ffdcdc 100%);
			margin: 0 30rpx 30rpx 0;
			position: relative;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.tagImage {
				width: 50rpx;
				height: 40rpx;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}

			&_tag {
				width: 143rpx;
				height: 46rpx;
				background: #ff0000;
				border-radius: 12rpx 0;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
				@include center;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
			}

			&_pic {
				width: 330rpx;
				height: 330rpx;
			}

			&_price {
				height: 36rpx;
				background: linear-gradient(180deg, #00e8ff 0%, #985fff 100%);
				border-radius: 12rpx 12rpx 0 0;
				opacity: 0.8;
				padding: 0 8rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				display: inline-block;
				position: absolute;
				top: 300rpx;
				right: 0;
			}

			&_title {
				width: 100%;
				height: 124rpx;
				background: #ffffff;
				border-radius: 0 0 12rpx 12rpx;
				padding: 24rpx;

				text {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					@include two;
				}
			}
		}
	}

	.chuanshuo.active text,
	.tag1 {
		background: #d24a03 !important;
	}

	.shishi.active text,
	.tag2 {
		background: #6f09d9 !important;
	}

	.xiyou.active text,
	.tag3 {
		background: #9f7c25 !important;
	}

	.putong.active text,
	.tag4 {
		background: #0c79b1 !important;
	}
</style>
